<template>
  <div>
    <div style="overflow: hidden">
      <div v-for="item in filePathList" :key="item.id" style="float: left">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>
            <a @click="sonFileList(item.absolutePath)">{{ item.basePath }}</a>
          </el-breadcrumb-item>
          <el-breadcrumb-item></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- <el-breadcrumb style="float: right" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">
          <a href="#">回到首页</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item></el-breadcrumb-item>
      </el-breadcrumb> -->
    </div>

    <!-- 卡片区域 -->
    <el-card>
      <!-- 搜索框 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入文件名称" v-model="searchfilename">
            <el-button
              @click="searchFiles"
              slot="append"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="addFileVisible = true"
            >创建目录</el-button
          >
        </el-col>
        <el-col :span="2" style="margin-left: 30px">
          <el-upload
            ref="upload"
            class="upload-demo"
            action="#"
            accept=".xlsx, .xls, .mp4, .jpg, .png, .txt, .mp3, .avi, .doc, .docx, .jpeg, .pdf ,.ppt,.xmind"
            :auto-upload="false"
            :on-change="uploadFile"
            :show-file-list="false"
          >
            <el-button type="warning">上传文件</el-button>
          </el-upload>
        </el-col>
      </el-row>

      <!-- 展示列表 -->
      <el-table :data="fileList" border stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="文件">
          <template slot-scope="scope">
            <div v-if="scope.row.isDirectory === 1">
              <i
                class="el-icon-folder-opened"
                style="color: green; font-size: 200%"
                @click="sonFileList(scope.row.filePath)"
              ></i>
              <span @click="sonFileList(scope.row.filePath)">{{
                scope.row.fileName
              }}</span>
            </div>
            <div v-else>
              <i
                class="el-icon-document"
                style="color: green; font-size: 200%"
              ></i>
              {{ scope.row.fileName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="路径" prop="filePath"></el-table-column>
        <el-table-column label="大小" prop="fileSize"></el-table-column>
        <el-table-column label="时间" prop="fileTime"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 修改 -->
            <el-button
              style="margin-left: 1px"
              @click="alterFile22(scope.row.fileName)"
              v-model="scope.row.fileName"
              type="primary"
              icon="el-icon-edit"
              size="mini"
            ></el-button>
            <!-- 删除 -->
            <el-button
              style="margin-left: 1px"
              @click="deleteFile(scope.row.filePath)"
              v-model="scope.row.filePath"
              type="danger"
              icon="el-icon-delete"
              size="mini"
            ></el-button>
            <!-- 收藏 -->
            <el-button
              style="margin-left: 1px"
              @click="collectionFile(scope.row.filePath)"
              v-model="scope.row.filePath"
              type="warning"
              icon="el-icon-star-off"
              size="mini"
            ></el-button>
            <!-- 下载 -->
            <el-button
              v-if="scope.row.isDirectory != 1"
              style="margin-left: 1px"
              @click="downLoadFile(scope.row.filePath)"
              v-model="scope.row.filePath"
              type="success"
              icon="el-icon-download"
              size="mini"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 8]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>

    <!-- 提示对话框 -->
    <el-dialog title="新建目录" :visible.sync="addFileVisible" width="40%">
      <el-form
        :model="addFileForm"
        :rules="addFileRules"
        ref="addFileFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="目录名称" prop="filename">
          <el-input v-model="addFileForm.filename"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addFileVisible = false">取 消</el-button>
        <el-button type="primary" @click="addFile">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改对话框 -->
    <el-dialog title="修改目录" :visible.sync="alterFileVisible" width="40%">
      <el-form
        :model="alterFileForm"
        :rules="alterFileRules"
        ref="addFileFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="原来的名称">
          <el-input
            readonly
            v-model="alterFileForm.oldname"
            placeholder="alterFileForm.oldname"
          ></el-input>
        </el-form-item>

        <el-form-item label="修改后的名称">
          <el-input v-model="alterFileForm.newname"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="alterFileVisible = false">取 消</el-button>
        <el-button type="primary" @click="alterFile">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 5,
        basepath: "/" + window.sessionStorage.getItem("token"),
      },
      fileList: [],
      filePathList: [
        {
          basePath: window.sessionStorage.getItem("token"),
        },
      ],
      searchfilename: "",
      filepath: "/" + window.sessionStorage.getItem("token"),
      total: 0,
      addFileVisible: false,
      addFileForm: {
        filename: "",
      },
      addFileRules: {
        filename: [
          {
            required: true,
            message: "请输入目录名",
            trigger: "blur",
          },
          {
            min: 1,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
      },

      alterFileVisible: false,
      alterFileForm: {
        oldname: "",
        newname: "",
        filepath: "",
      },
      alterFileRules: {
        oldname: [
          {
            required: true,
            message: "请输入目录名",
            trigger: "blur",
          },
          {
            min: 1,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    async getUserList() {
      // const { data: res } = await this.$http.get("lists", {
      //   params: this.queryInfo,
      // });
      const { data: res } = await this.$http({
        url: "lists",
        params: this.queryInfo,
      });

      if (res.code != 200) return this.$message.error("获取用户列表失败");
      // 赋值  第一页 1 显示 (0.,5)
      // 第二页         显示  （5，10）
      // 第三页              （10，15）
      this.fileList = res.data.slice(
        this.queryInfo.pagesize * (this.queryInfo.pagenum - 1),
        this.queryInfo.pagesize * this.queryInfo.pagenum
      );
      console.log(this.fileList + "fileList");
      console.log(res.data);
      console.log(res.data + "res.data");
      this.total = res.total;
    },
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.getUserList(this.filepath);
      this.sonFileList(this.filepath);
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      this.getUserList(this.filepath);
      this.sonFileList(this.filepath);
    },
    // 创建目录
    async addFile() {
      console.log(this.addFileForm.filename);
      this.addFileVisible = false;
      const { data: res } = await this.$http.get(
        // /zqp/xxxx
        "addFile?filename=" + this.filepath + "/" + this.addFileForm.filename
      );
      this.sonFileList(this.filepath);
      if (res.code != 200) return this.$message.error(res.msg);
      this.$message.success(res.msg);
    },

    // 删除
    deleteFile(deleteFilepath) {
      const that = this;
      this.$confirm("此操作将删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          that.$http
            .get("deleteFiles?deleteFilepath=" + deleteFilepath)
            .then(function (res) {
              that.sonFileList(that.filepath);
            });

          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 查询子路径
    async sonFileList(filePath) {
      const { data: res } = await this.$http.get(
        "searchFiles?filePath=" + filePath
      );
      this.filepath = filePath;
      console.log(res);
      if (res.code != 200) return this.$message.error("获取数据列表失败");
      // 赋值
      this.filePathList = res.path;
      this.total = res.total;
      this.fileList = res.data.slice(
        this.queryInfo.pagesize * (this.queryInfo.pagenum - 1),
        this.queryInfo.pagesize * this.queryInfo.pagenum
      );
    },

    // 修改
    alterFile() {
      const that = this;
      this.alterFileVisible = false;
      //
      this.$http
        .get("alterFiles", {
          params: this.alterFileForm,
        })
        .then(function (res) {
          that.sonFileList(that.filepath);
          that.$message.success("修改成功！！！");
        });
    },
    alterFile22(filename) {
      this.alterFileVisible = true;
      this.alterFileForm.oldname = filename;
      this.alterFileForm.filepath = this.filepath;
    },
    // 上传
    uploadFile(item) {
      const that = this;
      const formData = new FormData();
      const file = item.raw;
      formData.append("file", file);
      formData.append("filepath", this.filepath);
      // filepath=/zqp file=上传的文件名
      console.log(document.getElementsByClassName("el-upload__input")[0].value);

      // C:/fakepath/xxx

      this.$http({
        url: "upload", // 后端提供的接口
        method: "post",
        data: formData,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then(function (res) {
        console.log("上传成功！！！");
        that.sonFileList(that.filepath);
        console.log();
        that.$message.success("上传成功!!!");
      });
    },
    // 下载
    downLoadFile(filepath) {
      this.$http.get("downLoadFile?filePath=" + filepath).then(function (res) {
        window.open(res.data);
      });
    },
    // 搜索
    searchFiles() {
      const that = this;
      console.log(this.searchfilename);
      this.$http
        .get("searchFiles22?searchFilename=" + this.searchfilename)
        .then(function (res) {
          console.log(res);
          that.fileList = res.data.data;
          that.total = res.data.total;
        });
    },
    // 收藏
    async collectionFile(filepath) {
      const { data: res } = await this.$http.get(
        "collectFiles?filepath=" + filepath
      );
      if (res.data == 0) {
        this.$message.success(res.msg);
      } else {
        this.$message.success(res.msg);
      }
    },
  },
};
</script>

<style lang="less" scoped>
</style>
